<template>
  <view class="content">
    <view class="search-box">
      <up-input placeholder="请输入搜索关键字" border="surround" clearable prefixIcon="search" shape="square"
        customStyle="background-color: #f6f6f6;flex: 1;padding: 0 20rpx;height: 60rpx;"
        placeholderStyle="color: #888;font-size: 28rpx;" v-model="searchKey"></up-input>
      <button class="search-btn" @click="getSearchData">搜索</button>
    </view>



    <view class="search-history" v-if="historySearch.length">
      <view class="search-content-title">历史搜索</view>
      <view class="search-content-item">
        <view v-for="item in historySearch" :key="item" class="search-content-item-item" @click="search(item)">{{ item
        }}</view>
      </view>
    </view>


    <view class="search-content" v-if="searchData.length">
      <view v-for="item in searchData" :key="item.id" class="search-content-item">
        <view class="search-content-item-title">{{ item.title }}</view>
        <view class="item-box">
          <view v-for="it in item.skus" :key="it.id" class="item-box-item" @click="tapSpec(it.sku_id, item.id)">
            <view class="item-box-name">{{ it.specs }}</view>
            <view class="item-box-price">¥{{ it.price }}</view>
          </view>
        </view>
      </view>
    </view>



    <view class="empty" v-if="searchData.length === 0 && !loading">
      <up-empty mode="search"></up-empty>
    </view>

    <up-overlay :show="showChart" @click="showChart = false" zIndex="999"></up-overlay>

    <view class="charts-box" v-if="showChart">
      <chartPanel :chartData="chartData" :splitNumber="splitNumber" :categories="categories"
        :pageScrollTop="pageScrollTop" />
    </view>



  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onPageScroll, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import chartPanel from '@/components/chartPanel/index.vue'
import { goodsApi } from '@/api/goods'
import { debounce } from 'lodash'
onShareAppMessage(() => {
  return {
    title: '万选回收',
    path: '/pages/search'
  }
})

onShareTimeline(() => {
  return {
    title: '万选回收',
  }
})

const searchKey = ref('')
const showChart = ref(false)
const searchData = ref([])//列表数据
const historySearch = ref([])
const loading = ref(true)
//图表数据
const chartData = ref([])
const categories = ref([])
const splitNumber = ref(7)
const pageScrollTop = ref(0)

const getSearchData = debounce(async () => {
  setSearch()
  loading.value = true
  uni.showLoading({
    title: '加载中...'
  })
  try {
    const res = await goodsApi.search({
      keywords: searchKey.value
    })
    searchData.value = res.data
    loading.value = false
  } catch (error) {
    console.log(error)
    loading.value = false
  } finally {
    loading.value = false
    uni.hideLoading()
  }
}, 500)



// 监听页面滚动
onPageScroll((e) => {
  pageScrollTop.value = e.scrollTop
})
const setSearch = () => {
  const history = uni.getStorageSync('searchHistory') || []
  history.push(searchKey.value)
  if (history.length) {
    historySearch.value = history.filter((item, index, self) => self.indexOf(item) === index)
    uni.setStorageSync('searchHistory', historySearch.value)
  }
}

const tapSpec = async (sku_id, goods_id) => {
  try {
    uni.showLoading({
      title: '加载中...'
    })
    const res = await goodsApi.priceChart({
      sku_id,
      goods_id
    })
    const { dates, prices } = res.data
    console.log(dates, "dates", prices, "prices")
    categories.value = dates
    chartData.value = prices
    showChart.value = true
  } catch (error) {
    console.log(error)
  } finally {
    uni.hideLoading()
  }
}

const search = (item) => {
  searchKey.value = item
  getSearchData()
}

onMounted(() => {
  historySearch.value = uni.getStorageSync('searchHistory') || []
})


</script>

<style lang="scss">
@import '@/index.scss';

.content {
  min-height: 100vh;
  background: #fff;

  .search-box {
    display: flex;
    align-items: center;
    padding: 24rpx;
    gap: 20rpx;


    .search-btn {
      width: 120rpx;
      height: 60rpx;
      background: $primary;
      color: #fff;
      border-radius: 10rpx;
      font-size: 26rpx;
      text-align: center;
      line-height: 60rpx;
    }
  }

  .search-history {
    padding: 32rpx 24rpx;

    .search-content-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 30rpx;
      font-weight: 600;
    }

    .search-content-item {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;

      .search-content-item-item {
        padding: 10rpx 20rpx;
        background: #f6f6f6;
        border-radius: 26rpx;
        font-size: 24rpx;
      }
    }
  }

  .search-content {
    padding: 0 24rpx;
    border-top: 1rpx solid #f6f6f6;
    display: flex;
    flex-direction: column;
    gap: 20rpx;

    .search-content-item {
      border-bottom: 1rpx solid #f6f6f6;
      padding: 20rpx 0;

      .search-content-item-title {
        font-size: 30rpx;
        color: #333;
        margin-bottom: 20rpx;
        font-weight: 600;
      }

      .item-box {
        display: flex;
        flex-wrap: wrap;
        gap: 16rpx;

        .item-box-item {
          display: flex;
          align-items: center;
          gap: 20rpx;
          padding: 24rpx;
          background: #F7F7F8;
          border-radius: 6rpx;
        }

        .item-box-name {
          font-size: 28rpx;
          color: #333;
        }

        .item-box-price {
          font-size: 24rpx;
          color: $primary;
        }
      }
    }
  }

  .charts-box {
    width: 90vw;
    height: 500rpx;
    background: #fff;
    border-radius: 10rpx;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    transition: all 0.3s ease-in-out;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .empty {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
